<template>
  <div class="ww-ap-progress" :style="progressStyle">
    <div
      class="ww-ap-backround"
      :style="backgroundStyle+'background-color:' + this.backgroundColor"
    ></div>
    <div class="ww-ap-backround" :style="backgroundStyle+'background-color:' + this.overlayColor"></div>
    <div class="ww-ap-determinate" :style="determinateStyle"></div>
    <div class="ww-ap-dot" :style="dotStyle" :class="{'loading':loading}"></div>
  </div>
</template>
<script>
import Style from '@/utils/styleBuilder'
export default {
  name: 'ww-ap-progress',
  props: {
    value: {
      type: Number,
      required: true,
    },
    max: {
      type: Number,
      default: 100,
    },
    thick: {
      type: Number,
      default: 5,
    },
    position: {
      type: String,
      default: 'bottom',
      validator: data => {
        return ['top', 'bottom', 'left', 'right'].indexOf(data) >= 0
      },
    },
    invert: {
      type: Boolean,
      default: false,
    },
    cssPosition: {
      type: String,
      default: 'absolute',
      validator: data => {
        return ['absolute', 'fixed', 'relative'].indexOf(data) >= 0
      },
    },
    animated: {
      type: Boolean,
      default: true,
    },
    color: {
      type: String,
      default: '#fff',
    },
    overlayColor: {
      type: String,
      default: 'rgba(255,255,255,0.5)',
    },
    backgroundColor: {
      type: String,
      default: 'transparent',
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    percent () {
      return ((this.value < this.max ? this.value : this.max) / this.max) * 100
    },
    orientation () {
      if (['top', 'bottom'].indexOf(this.position) >= 0) return 'horizontal'
      else return 'vertical'
    },
    progressStyle () {
      var style = new Style()
      style.add('position:' + this.cssPosition)
      if (this.cssPosition !== 'relative') {
        style.add(this.position + ':0;')
      }
      if (this.orientation === 'horizontal') {
        style.add('width:100%;')
        style.add('height:' + this.thick + 'px')
      } else {
        style.add('height:100%;')
        style.add('width:' + this.thick + 'px')
        style.add('bottom:0;')
      }
      return style.result()
    },
    backgroundStyle () {
      var style = new Style()
      style.add('background-color:' + this.overlayColor)
      style.add(this.position + ':0;')
      if (this.orientation === 'horizontal') {
        if (this.revert) style.add('right:0px')
        style.add('height:' + this.thick + 'px')
        style.add('width:100%')
      } else {
        if (this.revert) style.add('bottom:0px')
        style.add('height:100%;')
        style.add('width:' + this.thick + 'px')
      }
      return style.result()
    },
    determinateStyle () {
      var style = new Style()
      if (this.loading) {
        style.add('background-color:red')
      } else {
        style.add('background-color:' + this.color)
      }
      style.add(this.position + ':0;')
      if (this.animated) {
        style.add('transition: 0.1s;')
      }
      if (this.orientation === 'horizontal') {
        style.add('height:' + this.thick + 'px')
        style.add('width:' + this.percent + '%;')
        if (this.invert) style.add('right:0;')
      } else {
        style.add('width:' + this.thick + 'px')
        style.add('height:' + this.percent + '%;')
        if (this.invert) style.add('bottom:0;')
      }
      return style.result()
    },
    dotStyle () {
      var style = new Style()
      style.add('width:' + this.thick * 3 + 'px')
      style.add('height:' + this.thick * 3 + 'px')
      style.add('border:2px solid ' + this.overlayColor)
      if (this.loading) {
        style.add('background-color:red')
      } else {
        style.add('background-color:' + this.backgroundColor)
      }
      style.add(this.position + ':50%;')
      if (this.orientation === 'horizontal') {
        style.add('transform:translate(-50%,50%)')
        style.add('left:' + this.percent + '%;')
        if (this.invert) {
          style.add('transform:translate(50%,50%)')
          style.add('right:' + this.percent + '%;')
        }
      } else {
        style.add('transform:translate(-50%,-50%)')
        style.add('top:' + this.percent + '%;')
        if (this.invert) {
          style.add('transform:translate(50%,-50%)')
          style.add('botton:' + this.percent + '%;')
        }
      }
      return style.result()
    },
  },
}
</script>
<style lang="scss">
.ww-ap-progress {
  & > div {
    position: absolute;
  }
  .ww-ap-dot {
    position: absolute;
    transition: 0.1s;
    &.loading::before{
      content:'';
      width:200%;
      height: 200%;
      position: absolute;
      background-color: rgba(red,0.5);
      margin-left: -50%;
      margin-top: -50%;
      animation: loading 2s infinite;
      transition: 0.1s;
    }
  }
}
@keyframes loading {
  0%{transform: rotate(0deg)}
  50%{transform: rotate(180deg)}
  100%{transform: rotate(360deg)}
}
</style>
